<template>
  <Form
    ref="smsSendForm"
    :model="form"
    :rules="rules"
    @keydown.enter.native="handleSubmit"
    inline
    :label-width="75"
    >
    <Row>
      <Col :md="8" :lg="5">
        <FormItem prop="ctime" label="加入日期：">
          <DatePicker v-model="form.ctime" format="yyyy-MM-dd" type="daterange" placeholder="请选择加入日期范围" @on-change="handleChange"></DatePicker>
          <!-- <DatePicker v-model="form.ctime" type="datetime" placeholder="请输入创建日期"></DatePicker> -->
        </FormItem>
      </Col>
      <Col :md="8" :lg="5">
        <FormItem prop="muid" label="推荐销售：">
          <Select v-model="form.muid">
            <Option value="all">
              全部
            </Option>
            <Option v-for="item in nameList" :value="item.id" :key="item.id">
              {{ item.uname }}
            </Option>
          </Select>
        </FormItem>
      </Col>
      <Col :md="8" :lg="5">
        <FormItem prop="uname" label="姓名：">
          <Input type="text" v-model="form.uname" placeholder="请输入姓名" />
        </FormItem>
      </Col>
      <Col :md="8" :lg="5">
        <FormItem prop="tel" label="电话：">
          <Input type="text" v-model="form.tel" placeholder="请输入电话" />
        </FormItem>
      </Col>
      <Col :md="8" :lg="4" style="text-align: right">
        <FormItem>
          <Button @click="handleSubmit" icon="md-search" type="primary">
            搜索
          </Button>
        </FormItem>
      </Col>
    </Row>
    <Row>
      <Col :md="8" :lg="5">
        <FormItem prop="state0" label="跟踪状态：">
          <Select v-model="form.state0">
            <Option value="all">
              全部
            </Option>
            <Option value="1">
              流失
            </Option>
            <Option value="0">
              有效
            </Option>
          </Select>
        </FormItem>
      </Col>
      <Col :md="8" :lg="5">
        <FormItem prop="state" label="客户状态：">
          <Select v-model="form.state">
            <Option value="all">
              全部
            </Option>
            <Option value="0">
              未预约
            </Option>
            <Option value="1">
              已预约
            </Option>
            <Option value="2">
              未到访
            </Option>
            <Option value="3">
              已到店
            </Option>
            <Option value="4">
              已签约
            </Option>
            <Option value="5">
              已退款
            </Option>
          </Select>
        </FormItem>
      </Col>
    </Row>
  </Form>
</template>
<script>
import {
  mapState,
  mapActions,
  mapMutations
} from 'vuex'
export default {
  name: 'SmsSendForm',
  props: {
    jointimeRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    salenameRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    phoneRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    trackStateRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    stateRules: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      joinDate: [],
      form: {
        ctime: '',
        muid: 'all',
        uname: '',
        tel: '',
        state0: 'all',
        state: 'all'
      }
    }
  },
  computed: {
    rules () {
      return {
        jointime: this.jointimeRules,
        salename: this.salenameRules,
        name: this.salenameRules,
        phone: this.phoneRules,
        trackstate: this.trackstateRules,
        state: this.stateRules
      }
    },
    ...mapState({
      nameList: state => state.user.nameList
    })
  },
  methods: {
    handleSubmit () {
      this.$refs.smsSendForm.validate((valid) => {
        if (valid) {
          this.$emit('on-success-valid', {
            // activitytime: this.activityDate,
            // btime: this.joinDate[0],
            // etime: this.joinDate[1],
            ctime: `${this.form.ctime[0]} ${this.form.ctime[1]}`,
            muid: this.form.muid && this.form.muid !== 'all' ? parseInt(this.form.muid) : '',
            uname: this.form.uname,
            tel: this.form.tel,
            state0: this.form.state0 && this.form.state0 !== 'all' ? parseInt(this.form.state0) : '',
            state: this.form.state && this.form.state !== 'all' ? parseInt(this.form.state) : ''
          })
        }
      })
    },
    handleChange (value) {
      this.form.ctime = value
    }
  }
}
</script>
